<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>添加页面</title>
</head>
<body>
<script>
    // 定义试题类型与对应div的映射关系
    const questionTypeMap = {
        1: 'singleChoice',
        2: 'multipleChoice',
        3: 'panduanChoice',
        4: 'simpleChoice'
    };

    // 根据选择的类型显示或隐藏相应的div
    function toggleInputs(type) {
        // 获取所有试题类型的div
        const divs = Object.values(questionTypeMap).map(id => document.getElementById(id));

        // 隐藏所有div并移除lay-verify="required"属性
        divs.forEach(div => {
            if (div) {
                div.style.display = 'none';
                const inputs = div.querySelectorAll('input, textarea');
                inputs.forEach(input => {
                    input.removeAttribute('lay-verify');
                });
            }
        });

        // 显示当前类型的div并添加lay-verify="required"属性
        const currentDiv = document.getElementById(questionTypeMap[type]);
        if (currentDiv) {
            currentDiv.style.display = 'block';
            const inputs = currentDiv.querySelectorAll('input, textarea');
            inputs.forEach(input => {
                // 排除多选题的选项E和F
                if (!['multiple_options_e', 'multiple_options_f'].includes(input.name)) {
                    input.setAttribute('lay-verify', 'required');
                }
            });
        }
    }

    // 假设这是页面加载时初始化试题类型的函数
    function initQuestionType() {
        const questionType = document.querySelector('input[name="type"]:checked').value;
        toggleInputs(questionType);
    }

    // 页面加载时初始化
    window.onload = initQuestionType;
</script>
<form class="layui-form" lay-filter="layui-form">
    <div class="mainBox">
        <div class="main-container">

            <div class="main-container">
				<div class="layui-form-item">
    				<label class="layui-form-label" title="类型"> <text title="必填项" style="color:red;">*</text>题目类型</label>
    				<div class="layui-input-block">
            			<input type="radio" lay-filter="type" name="type" id="type-1" value="1" title="单选题" checked="checked" />
						<input type="radio" lay-filter="type" name="type" id="type-2" value="2" title="多选题" />
						<input type="radio" lay-filter="type" name="type" id="type-3" value="3" title="判断题" />
						<input type="radio" lay-filter="type" name="type" id="type-4" value="4" title="简答题" />
<!--						<input type="radio" name="type" id="type-5" value="5" title="填空题"  />-->
    				</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label" title="题干"> <text title="必填项" style="color:red;">*</text>题干</label>
					<div class="layui-input-block">
						<textarea name="title" id="title" placeholder="请输入题干" class="layui-textarea" lay-verify="required"></textarea>
					</div>
				</div>

				<!-- 单选题 -->
				<div class="layui-form-item" id="singleChoice" style="display: none;">
					<div class="layui-form-item">
						<label class="layui-form-label" title="选项A"> <text title="必填项" style="color:red;">*</text>选项A</label>
						<div class="layui-input-block">
							<input autocomplete="off" type="text" name="single_options_a" id="options_a" placeholder="请输入选项A内容" class="layui-input" lay-verify="required">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label" title="选项B"> <text title="必填项" style="color:red;">*</text>选项B</label>
						<div class="layui-input-block">
							<input autocomplete="off" type="text" name="single_options_b" id="options_b" placeholder="请输入选项B内容" class="layui-input" lay-verify="required">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label" title="选项C"> <text title="必填项" style="color:red;">*</text>选项C</label>
						<div class="layui-input-block">
							<input autocomplete="off" type="text" name="single_options_c" id="options_c" placeholder="请输入选项B内容" class="layui-input" lay-verify="required">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label" title="选项D"> <text title="必填项" style="color:red;">*</text>选项D</label>
						<div class="layui-input-block">
							<input autocomplete="off" type="text" name="single_options_d" id="options_d" placeholder="请输入选项B内容" class="layui-input" lay-verify="required">
						</div>
					</div>

					<div class="layui-form-item">
						<label class="layui-form-label" title="考试名称"> <text title="必填项" style="color:red;">*</text>答案</label>

						<div class="layui-input-block">
							<input type="radio" name="single_anwser" id="anwser-1" value="A" title="A" checked="checked" />
							<input type="radio" name="single_anwser" id="anwser-2" value="B" title="B"  />
							<input type="radio" name="single_anwser" id="anwser-3" value="C" title="C"  />
							<input type="radio" name="single_anwser" id="anwser-4" value="D" title="D"  />
						</div>
					</div>
				</div>

				<!-- 多选题 -->
				<div class="layui-form-item" id="multipleChoice" style="display: none;">
					<div class="layui-form-item">
						<label class="layui-form-label" title="选项A"> <text title="必填项" style="color:red;">*</text>选项A</label>
						<div class="layui-input-block">
							<input autocomplete="off" type="text" name="multiple_options_a" placeholder="请输入选项A内容" class="layui-input" lay-verify="required">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label" title="选项B"> <text title="必填项" style="color:red;">*</text>选项B</label>
						<div class="layui-input-block">
							<input autocomplete="off" type="text" name="multiple_options_b" placeholder="请输入选项B内容" class="layui-input" lay-verify="required">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label" title="选项C"> <text title="必填项" style="color:red;">*</text>选项C</label>
						<div class="layui-input-block">
							<input autocomplete="off" type="text" name="multiple_options_c" placeholder="请输入选项内容" class="layui-input" lay-verify="required">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label" title="选项D"> <text title="必填项" style="color:red;">*</text>选项D</label>
						<div class="layui-input-block">
							<input autocomplete="off" type="text" name="multiple_options_d" placeholder="请输入选项内容" class="layui-input" lay-verify="required">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label" title="选项E">选项E</label>
						<div class="layui-input-block">
							<input autocomplete="off" type="text" name="multiple_options_e"  class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label" title="选项F">选项F</label>
						<div class="layui-input-block">
							<input autocomplete="off" type="text" name="multiple_options_f" class="layui-input">
						</div>
					</div>

					<div class="layui-form-item" >
						<label class="layui-form-label" title="选项"> <text title="必填项" style="color:red;">*</text>答案</label>

						<div class="layui-input-block">
							<input type="checkbox" name="multiple_anwser[]" value="A" title="A" />
							<input type="checkbox" name="multiple_anwser[]" value="B" title="B" />
							<input type="checkbox" name="multiple_anwser[]" value="C" title="C" />
							<input type="checkbox" name="multiple_anwser[]" value="D" title="D" />
							<input type="checkbox" name="multiple_anwser[]" value="E" title="E" />
							<input type="checkbox" name="multiple_anwser[]" value="F" title="F" />

						</div>
					</div>
				</div>

				<!-- 判断题 -->
				<div class="layui-form-item" id="panduanChoice" style="display: none;">
					<div class="layui-form-item">
						<label class="layui-form-label" title="选项A"> <text title="必填项" style="color:red;">*</text>选项A</label>
						<div class="layui-input-block">
							<input autocomplete="off" type="text" name="panduan_options_a" id="true_false_a" placeholder="请输入选项A内容" class="layui-input" lay-verify="required">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label" title="选项B"> <text title="必填项" style="color:red;">*</text>选项B</label>
						<div class="layui-input-block">
							<input autocomplete="off" type="text" name="panduan_options_b" id="true_false_b" placeholder="请输入选项B内容" class="layui-input" lay-verify="required">
						</div>
					</div>


					<div class="layui-form-item">
						<label class="layui-form-label" title="考试名称"> <text title="必填项" style="color:red;">*</text>答案</label>

						<div class="layui-input-block">
							<input type="radio" name="panduan_anwser" id="anwser-true" value="A" title="A" checked="checked" />
							<input type="radio" name="panduan_anwser" id="anwser-false" value="B" title="B"  />
						</div>
					</div>
				</div>

				<!-- 简答题 -->
				<div class="layui-form-item" id="simpleChoice" style="display: none;">
					<div class="layui-form-item">
						<label class="layui-form-label" title="答案"> <text title="必填项" style="color:red;">*</text>答案</label>
						<div class="layui-input-block">
							<textarea name="anwser" id="anwser" placeholder="请输入答案" class="layui-textarea" lay-verify="required"></textarea>
						</div>
					</div>
				</div>

				<div class="layui-form-item">
    				<label class="layui-form-label" title="分值">分值</label>
    				<div class="layui-input-block">
            			<input autocomplete="off" type="text" name="socre" id="socre" placeholder="请输入分值" value="2" class="layui-input" lay-verify="number">
    				</div>
				</div>

				<div class="layui-form-item">
    				<label class="layui-form-label" title="难度"> <text title="必填项" style="color:red;">*</text> 难度</label>
    				<div class="layui-input-block">
            			<input type="radio" name="difficulty" id="difficulty-1" value="1" title="简单" checked="checked" />
						<input type="radio" name="difficulty" id="difficulty-2" value="2" title="中等"  />
						<input type="radio" name="difficulty" id="difficulty-3" value="3" title="困难"  />
    				</div>
				</div>

				<div class="layui-form-item">
    				<label class="layui-form-label" title="分类">分类</label>
    				<div class="layui-input-block">
            			<select name="category_id" id="category_id" lay-verify="" placeholder="请选择分类">
							<option value="">请选择分类</option>
							<option value="1" selected="selected">A分类</option>
                        </select>
    				</div>
				</div>

				<div class="layui-form-item">
    				<label class="layui-form-label" title="课程id">课程</label>
    				<div class="layui-input-block">
            			<select name="course_id" id="course_id" lay-verify="" placeholder="请选择课程id">
							<option value="">请选择课程</option>
							<option value="1" selected="selected">计算机警应用基础</option>
                        </select>
    				</div>
				</div>

				<div class="layui-form-item">
    				<label class="layui-form-label" title="状态"> <text title="必填项" style="color:red;">*</text> 状态</label>
    				<div class="layui-input-block">
            			<!-- 隐藏域设置开关未选中时需要传递的参数值 -->
                        <input type="hidden" name="status" id="status-0" value="0" />
                        <input type="checkbox" name="status" id="status-1" lay-skin="switch" lay-text="启用|禁用" value="1"  />
    				</div>
				</div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="laytp-btn laytp-btn-primary laytp-btn-sm" lay-submit="" lay-filter="add">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button type="reset" class="laytp-btn laytp-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>
<script>
    if(localStorage.getItem("staticDomain")){
        document.write("<link rel='stylesheet' href='" + localStorage.getItem("staticDomain") + "/component/laytp/css/laytp.css?v=" + localStorage.getItem("version") + "'>");
        document.write("<script src='" + localStorage.getItem("staticDomain") + "/component/layui/layui.js?v=" + Date.now() + "'><\/script>");
        document.write("<script src='" + localStorage.getItem("staticDomain") + "/component/laytp/layuiConfig.js?v=" + Date.now() + "'><\/script>");
    }else{
        document.write("<link rel='stylesheet' href='/static/component/laytp/css/laytp.css?v=" + localStorage.getItem("version") + "'>");
        document.write("<script src='/static/component/layui/layui.js?v=" + Date.now() + "'><\/script>");
        document.write("<script src='/static/component/laytp/layuiConfig.js?v=" + Date.now() + "'><\/script>");
    }
</script>
<script>
    layui.use(['laytp', 'jquery', 'form'], function () {
        var form = layui.form;
        var $ = layui.jquery;

        // 监听试题类型切换
        form.on('radio(type)', function(data){
            toggleInputs(data.value);
        });

        // 动态加载课程数据
        facade.ajax({
            route: '/admin.course/index',
            method: 'GET'
        }).done(function (res) {
            if (res.code === 0 && res.data && res.data.length > 0) {
                var options = '<option value="">请选择课程</option>';
                res.data.forEach(function (course) {
                    options += '<option value="' + course.id + '">' + course.name + '</option>';
                });
                $('#course_id').html(options);
                form.render('select'); // 重新渲染下拉框
            }
        });

        // 动态加载分类数据
        facade.ajax({
            route: '/admin.category/index',
            successAlert: false
        }).done(function (res) {
            if (res.code === 0 && res.data && res.data.length > 0) {
                var options = '<option value="">请选择课程</option>';
                res.data.forEach(function (category) {
                    options += '<option value="' + category.id + '">' + category.name + '</option>';
                });
                $('#category_id').html(options);
                form.render('select'); // 重新渲染下拉框
            }
        });

        layui.form.on('submit(add)', function(data){
            var btnAnim = layui.button.load({elem:$(this)});
            try{
                data = facade.setEditorField(data);
            }catch (e) {
                facade.error(e);
                return false;
            }


            facade.ajax({
                route:'/admin.questions/add',
                data : data.field
            }).done(function(res){
                if(res.code === 0){
                    parent.layui.layer.close(parent.layui.layer.getFrameIndex(window.name));//关闭当前页
                    parent.layui.table.reloadData("laytp-table");
                }
                btnAnim.stop();
            }).fail(function(){
                btnAnim.stop();
            });
            return false;
        });

    })
</script>
</body>
</html>